<template>
	<view class="login-container">
		<view class="login-box">
			<view class="image-container">
				<image src="/static/icon/login.png" mode="aspectFit" class="login-image-top"></image>
				<image src="/static/icon/login2.png" mode="aspectFit" class="login-image"></image>
			</view>
			
			<uni-forms :modelValue="formData">
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.username"
						placeholder="请输入用户名"
						:clearable="true"
						prefixIcon="person"
						:inputBorder="false"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.password"
						type="password"
						placeholder="请输入密码"
						:clearable="true"
						prefixIcon="locked"
						:inputBorder="false"
					/>
				</uni-forms-item>
			</uni-forms>
			
			<button class="login-btn" type="primary" @click="handleLogin">登录</button>
			
			<view class="register-link" @click="goToRegister">
				还没有账号？立即注册
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { userStore } from '../../store/userStore'
import { CONFIG } from '../../utils/config'

const store = userStore()
const formData = ref({
  username: '',
  password: ''
})

async function handleLogin() {
  try {
    const res = await uni.request({
      url: `${CONFIG.base_url}/login`,
      method: 'POST',
      data: formData.value
    })
    
    if (res.data.code === 200) {
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({
        title: res.data.msg || '用户名或密码错误',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  }
}

function goToRegister() {
  uni.navigateTo({
    url: '/pages/register/register'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 40rpx;
	
	.login-box {
		padding: 40rpx;
		margin-top: 100rpx;
		
		.image-container {
			text-align: center;
			margin-bottom: 40rpx;
			
			.login-image-top {
				height: 100rpx;
				width: 400rpx;
				margin-bottom: 20rpx;
			}
			
			.login-image {
				height: 80rpx;
				width: 300rpx;
			}
		}
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 60rpx;
			color: #333;
		}
		
		.login-btn {
			margin-top: 60rpx;
			width: 100%;
		}
		
		.register-link {
			text-align: center;
			margin-top: 30rpx;
			color: #007AFF;
			font-size: 28rpx;
		}
	}
}

:deep(.uni-forms-item) {
	margin-bottom: 30rpx;
}

:deep(.uni-easyinput__content) {
	background-color: #f8f8f8;
	border-radius: 8rpx;
	height: 88rpx;
	padding-left: 20rpx;
	
	.uni-icons {
		color: #666;
	}
}

:deep(.is-input-border) {
	border: none;
}
</style>